import React, { useState, useEffect, useRef } from 'react';
import { 
  ArrowRight, 
  Menu, 
  X, 
  Twitter, 
  Linkedin, 
  Mail, 
  Briefcase,
  TrendingUp, 
  MapPin,
  Building2,
  Landmark,
  Wallet,
  Phone,
  Plus,
  Minus,
  Zap,
  FileCheck,
  Banknote,
  GraduationCap,
  Home,
  RefreshCw,
} from 'lucide-react';

/**
 * CUSTOM CURSOR COMPONENT
 */
const CustomCursor = () => {
  const [position, setPosition] = useState({ x: 0, y: 0 });
  const [isHovering, setIsHovering] = useState(false);
  const [isVisible, setIsVisible] = useState(false);

  useEffect(() => {
    const updateCursor = (e) => {
      setPosition({ x: e.clientX, y: e.clientY });
      setIsVisible(true);
    };

    const handleMouseOver = (e) => {
      if (e.target.closest('button') || e.target.closest('a') || e.target.closest('input') || e.target.closest('.interactive') || e.target.closest('.accordion-trigger')) {
        setIsHovering(true);
      } else {
        setIsHovering(false);
      }
    };

    window.addEventListener('mousemove', updateCursor);
    window.addEventListener('mouseover', handleMouseOver);
    
    return () => {
      window.removeEventListener('mousemove', updateCursor);
      window.removeEventListener('mouseover', handleMouseOver);
    };
  }, []);

  if (!isVisible) return null;

  return (
    <>
      <div 
        className="fixed pointer-events-none z-[9999] bg-lime-400 rounded-full mix-blend-difference transition-transform duration-100 ease-out"
        style={{ 
          left: position.x, 
          top: position.y,
          width: isHovering ? '12px' : '8px',
          height: isHovering ? '12px' : '8px',
          transform: 'translate(-50%, -50%)'
        }}
      />
      <div 
        className="fixed pointer-events-none z-[9998] border border-lime-400/50 rounded-full transition-all duration-300 ease-out"
        style={{ 
          left: position.x, 
          top: position.y,
          width: isHovering ? '48px' : '24px',
          height: isHovering ? '48px' : '24px',
          transform: 'translate(-50%, -50%)',
          backgroundColor: isHovering ? 'rgba(163, 230, 53, 0.1)' : 'transparent'
        }}
      />
    </>
  );
};

/**
 * REUSABLE UI COMPONENTS
 */
const SectionTitle = ({ children, subtitle }) => (
  <div className="mb-12">
    <div className="flex items-center gap-2 text-lime-400 mb-2 font-mono text-sm uppercase tracking-wider">
      <span className="w-2 h-2 bg-lime-400 rounded-full animate-pulse"></span>
      {subtitle}
    </div>
    <h2 className="text-4xl md:text-5xl font-bold text-white tracking-tight font-header">{children}</h2>
  </div>
);

const Button = ({ children, variant = 'primary', className = '', onClick }) => {
  const baseStyle = "px-6 py-3 font-mono text-sm tracking-wide transition-all duration-300 relative group overflow-hidden interactive flex items-center gap-2";
  const variants = {
    primary: "bg-lime-400 text-black hover:bg-lime-300 font-bold",
    outline: "bg-transparent border border-lime-400/30 text-lime-400 hover:border-lime-400 hover:bg-lime-400/10",
    ghost: "text-slate-400 hover:text-lime-400"
  };

  return (
    <button onClick={onClick} className={`${baseStyle} ${variants[variant]} ${className}`}>
      {children}
    </button>
  );
};

const Card = ({ children, className = '' }) => (
  <div className={`bg-slate-900/50 border border-slate-800 hover:border-lime-400/50 transition-colors duration-300 p-6 backdrop-blur-sm group relative overflow-hidden ${className}`}>
    <div className="absolute top-0 left-0 w-1 h-0 bg-lime-400 group-hover:h-full transition-all duration-300 ease-in-out"></div>
    {children}
  </div>
);

// --- FAQ ACCORDION ITEM ---
const AccordionItem = ({ question, answer, isOpen, onClick }) => (
  <div className="border-b border-slate-800">
    <button 
      className="w-full py-6 flex items-center justify-between text-left focus:outline-none group interactive accordion-trigger"
      onClick={onClick}
    >
      <span className={`text-lg md:text-xl font-header transition-colors ${isOpen ? 'text-lime-400' : 'text-white group-hover:text-lime-400/80'}`}>
        {question}
      </span>
      <div className={`p-1 rounded-full border transition-all duration-300 ${isOpen ? 'border-lime-400 rotate-180 bg-lime-400/10' : 'border-slate-700 bg-slate-800'}`}>
        {isOpen ? <Minus className="w-4 h-4 text-lime-400" /> : <Plus className="w-4 h-4 text-slate-400" />}
      </div>
    </button>
    <div 
      className={`overflow-hidden transition-all duration-500 ease-in-out ${isOpen ? 'max-h-48 opacity-100 mb-6' : 'max-h-0 opacity-0'}`}
    >
      <p className="text-slate-400 font-sans leading-relaxed pr-8">
        {answer}
      </p>
    </div>
  </div>
);

/**
 * PAGES
 */

// --- HOME PAGE ---
const HomePage = ({ navigate }) => {
  const [openFaq, setOpenFaq] = useState(0);
  const [scrollY, setScrollY] = useState(0);

  useEffect(() => {
    const handleScroll = () => {
      setScrollY(window.scrollY);
    };
    window.addEventListener('scroll', handleScroll);
    return () => window.removeEventListener('scroll', handleScroll);
  }, []);

  const faqs = [
    {
      q: "What is the minimum credit score required?",
      a: "While traditional banks typically look for 750+, our network includes NBFCs and agile lenders who consider scores as low as 650, provided cash flow is strong."
    },
    {
      q: "How fast is the disbursal process?",
      a: "For pre-approved clients, we achieve disbursal in as little as 24 hours. Complex corporate restructuring typically takes 3-5 business days."
    },
    {
      q: "Do you offer collateral-free loans?",
      a: "Yes. We specialize in unsecured business loans up to ₹5 Cr based on turnover and banking history, utilizing government schemes like CGTMSE where applicable."
    },
    {
      q: "What documentation is needed?",
      a: "Standard KYC, last 12 months' bank statements, and 2 years of ITR/Financials. Our digital portal allows for paperless submission."
    }
  ];

  // Using raw filenames directly to ensure they match exact uploads
  const imgRupee1 = "rupee-1-3d.png.jpg";
  const imgRupee2 = "rupee-2-3d.png.png";
  const imgRupee3 = "rupee-3-3d.png.png";

  return (
    <div className="space-y-32">
      {/* Hero Section */}
      <section className="relative min-h-[90vh] flex items-center pt-20 overflow-hidden">
        <div className="absolute inset-0 z-0">
          <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[600px] h-[600px] bg-blue-600/20 rounded-full blur-[120px] opacity-30 animate-pulse"></div>
          <div className="absolute bottom-0 right-0 w-[400px] h-[400px] bg-lime-500/10 rounded-full blur-[100px] opacity-20"></div>
        </div>
        
        <div className="container mx-auto px-6 relative z-10 grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
          <div className="max-w-3xl pt-10 lg:pt-0">
            <div className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-slate-800/50 border border-slate-700 text-lime-400 font-mono text-xs mb-8">
              <span className="relative flex h-2 w-2">
                <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-lime-400 opacity-75"></span>
                <span className="relative inline-flex rounded-full h-2 w-2 bg-lime-500"></span>
              </span>
              India's Premier Financial Consultancy
            </div>
            
            <h1 className="text-5xl md:text-7xl lg:text-8xl font-bold text-white mb-8 tracking-tight leading-[1.1] font-header">
              Turn Credit Into <br />
              <span className="text-transparent bg-clip-text bg-gradient-to-r from-lime-400 to-emerald-400">
                Possibility.
              </span>
            </h1>
            
            <p className="text-xl text-slate-400 max-w-2xl mb-10 leading-relaxed font-mono">
              We don't just lend; we connect. As a dedicated India-based consultancy, we bridge the gap between you and suitable partner banks/NBFCs for tailored financial products.
            </p>
            
            <div className="flex flex-wrap gap-4">
              <Button onClick={() => navigate('contact')}>
                Get Funded <ArrowRight className="w-4 h-4" />
              </Button>
              <Button variant="outline" onClick={() => navigate('services')}>
                Explore Products
              </Button>
            </div>

            <div className="mt-12 flex items-center gap-6 text-slate-500 font-mono text-xs border-t border-slate-800/50 pt-6 max-w-lg">
               <div>
                  <span className="block text-lime-400 text-lg font-bold">50+</span>
                  <span>Banking Partners</span>
               </div>
               <div className="w-[1px] h-8 bg-slate-800"></div>
               <div>
                  <span className="block text-white text-lg font-bold">₹500Cr+</span>
                  <span>Disbursed</span>
               </div>
               <div className="w-[1px] h-8 bg-slate-800"></div>
               <div>
                  <span className="block text-lime-400 text-lg font-bold">India</span>
                  <span>Headquarters</span>
               </div>
            </div>
          </div>

          {/* 3D Floating Elements with Parallax Scroll Effect */}
          <div className="hidden lg:block relative h-[600px] w-full perspective-1000">
             <div className="absolute top-1/4 right-0 w-64 h-64 bg-gradient-to-tr from-lime-400 to-emerald-600 rounded-3xl opacity-20 blur-3xl animate-blob"></div>
             
             {/* Main Floating 3D Rupee Note */}
             <div 
               className="absolute top-20 right-10 z-20 transition-transform duration-100 ease-out"
               style={{ transform: `translateY(${scrollY * -0.2}px) rotate(${scrollY * 0.02}deg)` }}
             >
                <img 
                  src={imgRupee1}
                  alt="3D Rupee Note" 
                  className="w-80 h-auto drop-shadow-[0_20px_50px_rgba(163,230,53,0.3)] hover:scale-105 transition-transform duration-500"
                />
             </div>

             {/* Secondary Floating 3D Element */}
             <div 
               className="absolute bottom-20 right-40 z-10 transition-transform duration-100 ease-out"
               style={{ transform: `translateY(${scrollY * -0.1}px) rotate(${-scrollY * 0.03}deg)` }}
             >
                 <img 
                  src={imgRupee2}
                  alt="3D Rupee Coin Note" 
                  className="w-48 h-auto drop-shadow-2xl opacity-90 hover:opacity-100 transition-opacity"
                />
             </div>

             {/* Third Floating Element */}
             <div 
               className="absolute top-0 left-0 z-0 transition-transform duration-100 ease-out opacity-60"
               style={{ transform: `translateY(${scrollY * 0.15}px) rotate(${scrollY * 0.05}deg)` }}
             >
                 <img 
                  src={imgRupee3}
                  alt="3D Rupee Block" 
                  className="w-32 h-auto drop-shadow-xl"
                />
             </div>
          </div>
        </div>

        {/* Scroll Indicator */}
        <div className="absolute bottom-10 left-1/2 -translate-x-1/2 flex flex-col items-center gap-2 text-slate-500 animate-bounce">
          <span className="text-xs font-mono uppercase">Scroll</span>
          <div className="w-[1px] h-12 bg-gradient-to-b from-lime-400 to-transparent"></div>
        </div>
      </section>

      {/* HOW IT WORKS SECTION */}
      <section className="container mx-auto px-6">
        <SectionTitle subtitle="Workflow">How It Works</SectionTitle>
        
        <div className="relative">
           {/* Connecting Line (Desktop) */}
           <div className="hidden md:block absolute top-12 left-0 w-full h-0.5 bg-gradient-to-r from-lime-400/0 via-lime-400/50 to-lime-400/0 z-0"></div>

           <div className="grid grid-cols-1 md:grid-cols-4 gap-8 relative z-10">
              {[
                { 
                  icon: FileCheck, 
                  step: "01", 
                  title: "Consultation", 
                  desc: "We analyze your profile to understand your specific financial needs (Personal, Business, or Property)." 
                },
                { 
                  icon: Zap, 
                  step: "02", 
                  title: "Partner Match", 
                  desc: "Our system matches you with the most suitable partner bank or NBFC from our 50+ network." 
                },
                { 
                  icon: Building2, 
                  step: "03", 
                  title: "Documentation", 
                  desc: "We assist in structuring your file to ensure maximum approval chances." 
                },
                { 
                  icon: Banknote, 
                  step: "04", 
                  title: "Approval", 
                  desc: "Disbursal happens directly from the bank to your account." 
                }
              ].map((item, index) => (
                <div key={index} className="group">
                  <div className="w-24 h-24 bg-slate-900 border border-slate-800 group-hover:border-lime-400 rounded-2xl flex items-center justify-center mb-6 shadow-lg shadow-black/50 transition-all duration-300 relative mx-auto md:mx-0 floating-element" style={{animationDelay: `${index * 0.2}s`}}>
                     <item.icon className="w-10 h-10 text-slate-400 group-hover:text-lime-400 transition-colors duration-300" />
                     <div className="absolute -top-3 -right-3 w-8 h-8 bg-slate-800 border border-slate-700 rounded-full flex items-center justify-center text-xs font-mono text-lime-400">
                       {item.step}
                     </div>
                  </div>
                  <h3 className="text-xl font-bold text-white mb-3 text-center md:text-left font-header">{item.title}</h3>
                  <p className="text-slate-400 text-sm text-center md:text-left leading-relaxed font-sans">{item.desc}</p>
                </div>
              ))}
           </div>
        </div>
      </section>

      {/* Services / Bento Grid Section */}
      <section className="container mx-auto px-6" id="services">
        <SectionTitle subtitle="Our Products">Comprehensive Loan Solutions</SectionTitle>
        
        {/* Updated Grid for 6 Items */}
        <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
          
          {/* 1. Business Loans */}
          <Card className="flex flex-col justify-between group h-full">
            <div>
              <div className="w-12 h-12 bg-lime-400/10 rounded-lg flex items-center justify-center mb-6 text-lime-400">
                <Briefcase className="w-6 h-6" />
              </div>
              <h3 className="text-2xl font-bold text-white mb-4 font-header">Business Loans</h3>
              <p className="text-slate-400 font-sans text-sm">
                Unsecured capital for expansion, inventory, or working capital. Tailored for SMEs and large enterprises.
              </p>
            </div>
            <div className="mt-6 pt-4 border-t border-slate-800">
               <span className="text-xs font-mono text-lime-400">Up to ₹5 Cr Unsecured</span>
            </div>
          </Card>

          {/* 2. Personal Loans */}
          <Card className="flex flex-col justify-between group h-full">
            <div>
              <div className="w-12 h-12 bg-blue-500/10 rounded-lg flex items-center justify-center mb-6 text-blue-400">
                <Wallet className="w-6 h-6" />
              </div>
              <h3 className="text-2xl font-bold text-white mb-4 font-header">Personal Loans</h3>
              <p className="text-slate-400 font-sans text-sm">
                Quick approvals for personal needs. Whether it's travel, medical, or lifestyle upgrades.
              </p>
            </div>
            <div className="mt-6 pt-4 border-t border-slate-800">
               <span className="text-xs font-mono text-blue-400">Disbursal in 24 hrs</span>
            </div>
          </Card>

          {/* 3. Home Loan */}
          <Card className="flex flex-col justify-between group h-full">
            <div>
               <div className="w-12 h-12 bg-purple-500/10 rounded-lg flex items-center justify-center mb-6 text-purple-400">
                <Home className="w-6 h-6" />
              </div>
              <h3 className="text-2xl font-bold text-white mb-4 font-header">Home Loan</h3>
              <p className="text-slate-400 font-sans text-sm">
                Competitive interest rates for buying your dream home. We compare across all major banks.
              </p>
            </div>
            <div className="mt-6 pt-4 border-t border-slate-800">
               <span className="text-xs font-mono text-purple-400">Lowest Rate Guarantee</span>
            </div>
          </Card>

          {/* 4. Loan Against Property */}
          <Card className="flex flex-col justify-between group h-full md:col-span-2">
            <div className="flex flex-col md:flex-row gap-6 items-start">
               <div>
                  <div className="w-12 h-12 bg-orange-500/10 rounded-lg flex items-center justify-center mb-6 text-orange-400">
                    <Building2 className="w-6 h-6" />
                  </div>
                  <h3 className="text-2xl font-bold text-white mb-4 font-header">Loan Against Property</h3>
                  <p className="text-slate-400 font-sans text-sm max-w-md">
                    Unlock the hidden value of your real estate asset. High loan value with flexible repayment tenures. Ideal for big-ticket funding needs.
                  </p>
               </div>
               {/* Decorative 3D Element inside card */}
               <div className="hidden md:block w-32 ml-auto opacity-80">
                   <img src={imgRupee3} alt="Icon" className="w-full h-auto animate-pulse-slow" />
               </div>
            </div>
          </Card>

           {/* 5. Education Loan */}
           <Card className="flex flex-col justify-between group h-full">
            <div>
               <div className="w-12 h-12 bg-pink-500/10 rounded-lg flex items-center justify-center mb-6 text-pink-400">
                <GraduationCap className="w-6 h-6" />
              </div>
              <h3 className="text-2xl font-bold text-white mb-4 font-header">Education Loan</h3>
              <p className="text-slate-400 font-sans text-sm">
                Funding for overseas or domestic education. We handle the complex paperwork.
              </p>
            </div>
          </Card>

           {/* 6. Balance Transfer */}
           <Card className="flex flex-col justify-between group h-full md:col-span-3 bg-gradient-to-r from-slate-900 to-slate-800">
            <div className="flex items-center justify-between">
              <div>
                <div className="flex items-center gap-3 mb-4">
                    <div className="w-10 h-10 bg-green-500/10 rounded-lg flex items-center justify-center text-green-400">
                        <RefreshCw className="w-5 h-5" />
                    </div>
                    <h3 className="text-2xl font-bold text-white font-header">Balance Transfer</h3>
                </div>
                <p className="text-slate-400 font-sans text-sm max-w-2xl">
                    Reduce your EMI burden by transferring your existing high-interest loans to our partner banks at lower rates. 
                    <span className="text-lime-400 ml-2">Top-up facility available.</span>
                </p>
              </div>
              <div className="hidden md:flex items-center gap-4 pr-8">
                 <div className="text-right">
                    <div className="text-3xl font-bold text-white font-mono">1%</div>
                    <div className="text-xs text-slate-500 uppercase">Lower Rate</div>
                 </div>
                 <div className="h-10 w-[1px] bg-slate-700"></div>
                 <div className="text-right">
                    <div className="text-3xl font-bold text-white font-mono">0</div>
                    <div className="text-xs text-slate-500 uppercase">Hidden Fees</div>
                 </div>
              </div>
            </div>
          </Card>
        </div>
      </section>

      {/* FAQ SECTION */}
      <section className="container mx-auto px-6">
        <div className="grid grid-cols-1 lg:grid-cols-12 gap-12">
           <div className="lg:col-span-4">
              <SectionTitle subtitle="Support">Common Queries</SectionTitle>
              <p className="text-slate-400 font-sans mb-8">
                Everything you need to know about our process, eligibility, and banking partners.
              </p>
              <div className="p-6 bg-slate-900/50 border border-slate-800 rounded-2xl relative overflow-hidden">
                 <div className="relative z-10">
                   <h4 className="text-white font-bold mb-2 font-header">Still have questions?</h4>
                   <p className="text-sm text-slate-400 mb-4">Our financial experts are available for a consultation.</p>
                   <Button variant="outline" className="w-full justify-center text-xs" onClick={() => navigate('contact')}>Contact Support</Button>
                 </div>
                 {/* 3D Decor */}
                 <div className="absolute -bottom-10 -right-10 w-32 h-32 bg-lime-400/10 rounded-full blur-2xl"></div>
              </div>
           </div>
           
           <div className="lg:col-span-8">
              <div className="bg-slate-900/30 border border-slate-800 rounded-2xl p-2">
                 {faqs.map((faq, i) => (
                    <AccordionItem 
                      key={i}
                      question={faq.q}
                      answer={faq.a}
                      isOpen={openFaq === i}
                      onClick={() => setOpenFaq(openFaq === i ? -1 : i)}
                    />
                 ))}
              </div>
           </div>
        </div>
      </section>

      {/* Metrics Section */}
      <section className="border-y border-slate-800 bg-slate-900/50">
        <div className="container mx-auto px-6 py-16">
          <div className="grid grid-cols-2 md:grid-cols-4 gap-8">
            {[
              { label: 'Partner Banks', value: '50+' },
              { label: 'Clients Served', value: '1K+' },
              { label: 'Approval Rate', value: '98%' },
              { label: 'Capital Raised', value: '₹5B+' },
            ].map((stat, i) => (
              <div key={i} className="text-center">
                <div className="text-4xl md:text-5xl font-bold text-white mb-2 font-header">{stat.value}</div>
                <div className="text-sm text-slate-500 uppercase tracking-widest font-mono">{stat.label}</div>
              </div>
            ))}
          </div>
        </div>
      </section>
    </div>
  );
};

// --- ABOUT PAGE ---
const AboutPage = () => {
  const imgRupee2 = "rupee-2-3d.png.png";
  
  return (
    <div className="container mx-auto px-6 pt-32 pb-20">
      <SectionTitle subtitle="About Seventh Credits">The Financial Architects</SectionTitle>
      
      <div className="grid grid-cols-1 md:grid-cols-2 gap-16 items-center mb-24">
        <div className="space-y-6 text-slate-300 leading-relaxed text-lg font-sans">
          <p>
            <strong className="text-white">Seventh Credits</strong> is a premier <span className="text-lime-400">India-based financial consultancy</span>. It is crucial to note that <span className="text-white font-bold">we do not lend money directly.</span>
          </p>
          <p>
            Instead, we act as a strategic bridge. We analyze your financial health and connect you with the most suitable partner from our network of <span className="text-lime-400">50+ Banks and NBFCs</span>. Our role is to negotiate the best interest rates, ensure your paperwork is flawless, and expedite the disbursal process.
          </p>
          <div className="grid grid-cols-2 gap-4 mt-8">
            <div className="p-4 border border-slate-700 bg-slate-800/30 rounded-lg floating-element" style={{animationDelay: '0s'}}>
                <span className="block text-lime-400 font-mono text-xl mb-1">01.</span>
                <span className="text-white font-bold font-header">Consultancy</span>
            </div>
            <div className="p-4 border border-slate-700 bg-slate-800/30 rounded-lg floating-element" style={{animationDelay: '0.1s'}}>
                <span className="block text-lime-400 font-mono text-xl mb-1">02.</span>
                <span className="text-white font-bold font-header">Aggregator</span>
            </div>
            <div className="p-4 border border-slate-700 bg-slate-800/30 rounded-lg floating-element" style={{animationDelay: '0.2s'}}>
                <span className="block text-lime-400 font-mono text-xl mb-1">03.</span>
                <span className="text-white font-bold font-header">Pan-India</span>
            </div>
            <div className="p-4 border border-slate-700 bg-slate-800/30 rounded-lg floating-element" style={{animationDelay: '0.3s'}}>
                <span className="block text-lime-400 font-mono text-xl mb-1">04.</span>
                <span className="text-white font-bold font-header">Transparency</span>
            </div>
          </div>
        </div>
        <div className="relative">
          <div className="aspect-square rounded-2xl overflow-hidden border border-slate-700 relative z-10 bg-slate-800 flex items-center justify-center group">
              <div className="absolute inset-0 bg-grid-slate-800/50 z-0"></div>
              <img src={imgRupee2} className="w-64 h-auto z-10 animate-float-slow drop-shadow-2xl" alt="Finance 3D" />
          </div>
          <div className="absolute -top-4 -right-4 w-full h-full border border-lime-400/30 rounded-2xl z-0"></div>
          <div className="absolute -bottom-4 -left-4 w-full h-full border border-blue-500/30 rounded-2xl z-0"></div>
        </div>
      </div>
    </div>
  );
};

// --- BLOG PAGE (News/Updates) ---
const BlogPage = () => {
  const posts = [
    { title: "Repo Rate Trends 2025: What it Means for Borrowers", date: "Oct 12, 2025", tag: "Analysis", read: "5 min" },
    { title: "Securing Unsecured Loans for SMEs", date: "Sep 28, 2025", tag: "Guide", read: "8 min" },
    { title: "NBFC vs Traditional Banks: A Comparison", date: "Sep 15, 2025", tag: "Education", read: "6 min" },
    { title: "Maximizing Your Credit Score for Big Ticket Loans", date: "Aug 30, 2025", tag: "Advisory", read: "4 min" },
    { title: "Understanding Loan Against Property (LAP)", date: "Aug 12, 2025", tag: "Product", read: "12 min" },
    { title: "The Rise of Digital Lending in India", date: "Jul 22, 2025", tag: "Tech", read: "7 min" }
  ];

  return (
    <div className="container mx-auto px-6 pt-32 pb-20">
      <SectionTitle subtitle="Market Intelligence">Financial Updates</SectionTitle>
      
      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
        {posts.map((post, i) => (
          <Card key={i} className="group cursor-pointer">
             <div className="flex justify-between items-start mb-6">
                <span className="px-3 py-1 text-xs font-mono border border-slate-700 rounded-full text-slate-400">{post.tag}</span>
                <span className="text-xs text-slate-500 font-mono">{post.read}</span>
             </div>
             <h3 className="text-xl font-bold text-white mb-3 group-hover:text-lime-400 transition-colors font-header">{post.title}</h3>
             <p className="text-slate-400 text-sm mb-6 font-sans">Expert insights into the changing landscape of finance and credit availability.</p>
             <div className="flex items-center justify-between border-t border-slate-800 pt-4 mt-auto">
               <span className="text-xs text-slate-500">{post.date}</span>
               <ArrowRight className="w-4 h-4 text-lime-400 -translate-x-2 opacity-0 group-hover:translate-x-0 group-hover:opacity-100 transition-all" />
             </div>
          </Card>
        ))}
      </div>
    </div>
  );
};

// --- CONTACT PAGE ---
const ContactPage = () => (
  <div className="container mx-auto px-6 pt-32 pb-20">
    <div className="grid grid-cols-1 lg:grid-cols-2 gap-16">
      <div>
        <SectionTitle subtitle="Connect">Start the Conversation</SectionTitle>
        <p className="text-slate-400 text-lg mb-8 font-sans">
          Your capital requirements deserve expert attention. Reach out to Seventh Credits today.
        </p>
        
        <div className="space-y-6">
          <div className="flex items-center gap-4 text-slate-300">
            <div className="w-10 h-10 bg-slate-800 rounded-full flex items-center justify-center text-lime-400">
              <Phone className="w-5 h-5" />
            </div>
            <span className="font-mono text-xl text-white">+91 7025488718</span>
          </div>
          <div className="flex items-center gap-4 text-slate-300">
            <div className="w-10 h-10 bg-slate-800 rounded-full flex items-center justify-center text-lime-400">
              <Mail className="w-5 h-5" />
            </div>
            <span className="font-mono">contact@seventhcredits.com</span>
          </div>
          <div className="flex items-center gap-4 text-slate-300">
            <div className="w-10 h-10 bg-slate-800 rounded-full flex items-center justify-center text-lime-400">
              <MapPin className="w-5 h-5" />
            </div>
            <span className="font-mono">India</span>
          </div>
        </div>
      </div>

      <form className="bg-slate-900/50 p-8 border border-slate-800 rounded-2xl space-y-6 backdrop-blur-md">
        <div className="grid grid-cols-2 gap-6">
          <div className="space-y-2">
            <label className="text-xs font-mono text-lime-400 uppercase">First Name</label>
            <input type="text" className="w-full bg-slate-950 border border-slate-800 rounded p-3 text-white focus:outline-none focus:border-lime-400 transition-colors" placeholder="John" />
          </div>
          <div className="space-y-2">
            <label className="text-xs font-mono text-lime-400 uppercase">Last Name</label>
            <input type="text" className="w-full bg-slate-950 border border-slate-800 rounded p-3 text-white focus:outline-none focus:border-lime-400 transition-colors" placeholder="Doe" />
          </div>
        </div>
        
        <div className="space-y-2">
          <label className="text-xs font-mono text-lime-400 uppercase">Phone Number</label>
          <input type="tel" className="w-full bg-slate-950 border border-slate-800 rounded p-3 text-white focus:outline-none focus:border-lime-400 transition-colors" placeholder="+91 98765 43210" />
        </div>

        <div className="space-y-2">
          <label className="text-xs font-mono text-lime-400 uppercase">Loan Requirement</label>
          <select className="w-full bg-slate-950 border border-slate-800 rounded p-3 text-white focus:outline-none focus:border-lime-400 transition-colors">
            <option>Personal Loan</option>
            <option>Business Loan</option>
            <option>Home Loan</option>
            <option>Loan Against Property</option>
            <option>Education Loan</option>
            <option>Balance Transfer</option>
          </select>
        </div>

        <div className="space-y-2">
          <label className="text-xs font-mono text-lime-400 uppercase">Message</label>
          <textarea rows="4" className="w-full bg-slate-950 border border-slate-800 rounded p-3 text-white focus:outline-none focus:border-lime-400 transition-colors" placeholder="Tell us about your financial needs..."></textarea>
        </div>

        <Button className="w-full justify-center">Request Callback</Button>
      </form>
    </div>
  </div>
);

// --- SIMPLE TEXT PAGES (Privacy, Terms, Sitemap) ---
const TextPage = ({ title, content }) => (
  <div className="container mx-auto px-6 pt-32 pb-20 max-w-3xl">
    <h1 className="text-4xl font-bold text-white mb-8 font-header">{title}</h1>
    <div className="prose prose-invert prose-lime">
      <div className="text-slate-400 space-y-4 whitespace-pre-wrap font-mono text-sm leading-relaxed">
        {content}
      </div>
    </div>
  </div>
);

const SitemapPage = ({ setPage }) => {
  const links = ['Home', 'About', 'Services', 'Blog', 'Contact', 'Privacy', 'Terms', 'Sitemap'];
  return (
    <div className="container mx-auto px-6 pt-32 pb-20">
      <SectionTitle subtitle="Directory">Site Map</SectionTitle>
      <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
        {links.map(link => (
          <button 
            key={link} 
            onClick={() => setPage(link.toLowerCase())}
            className="flex items-center justify-between p-4 border border-slate-800 hover:border-lime-400/50 hover:bg-slate-800/50 text-left transition-all group"
          >
            <span className="text-slate-300 group-hover:text-white font-mono text-lg">{link}</span>
            <ArrowRight className="w-4 h-4 text-lime-400 opacity-0 group-hover:opacity-100 transition-opacity" />
          </button>
        ))}
      </div>
    </div>
  );
};


/**
 * MAIN APP COMPONENT & LAYOUT
 */
const App = () => {
  const [activePage, setActivePage] = useState('home');
  const [menuOpen, setMenuOpen] = useState(false);
  const [scrolled, setScrolled] = useState(false);

  // Using raw filename for logo as well
  const logoUrl = "openart-c3e22b2bc45843ed9adb9f4a47f9056f_raw (1).jpg";

  useEffect(() => {
    // Scroll handling
    const handleScroll = () => setScrolled(window.scrollY > 50);
    window.addEventListener('scroll', handleScroll);

    // Favicon Setup
    const link = document.querySelector("link[rel~='icon']");
    if (!link) {
      const newLink = document.createElement('link');
      newLink.rel = 'icon';
      newLink.href = logoUrl;
      document.head.appendChild(newLink);
    } else {
      link.href = logoUrl;
    }

    return () => window.removeEventListener('scroll', handleScroll);
  }, [logoUrl]);

  useEffect(() => {
    window.scrollTo(0, 0);
    setMenuOpen(false);
  }, [activePage]);

  const navLinks = [
    { id: 'home', label: 'Home' },
    { id: 'about', label: 'About' },
    { id: 'services', label: 'Services' }, 
    { id: 'blog', label: 'Blog' },
    { id: 'contact', label: 'Contact' }
  ];

  const handleNav = (id) => {
    if (id === 'services') {
      setActivePage('home'); 
      // Small timeout to allow render then scroll
      setTimeout(() => {
        const element = document.getElementById('services');
        if (element) element.scrollIntoView({ behavior: 'smooth' });
      }, 100);
    } else {
      setActivePage(id);
    }
  };

  const renderContent = () => {
    switch (activePage) {
      case 'home': return <HomePage navigate={setActivePage} />;
      case 'about': return <AboutPage />;
      case 'blog': return <BlogPage />;
      case 'contact': return <ContactPage />;
      case 'sitemap': return <SitemapPage setPage={setActivePage} />;
      case 'privacy': return <TextPage title="Privacy Policy" content={`Last Updated: 2025\n\n1. DATA COLLECTION\nWe collect minimal data necessary for loan processing.\n\n2. USAGE\nData is shared only with partner banks for credit assessment.`} />;
      case 'terms': return <TextPage title="Terms & Conditions" content={`AGREEMENT\n\nSeventh Credits acts as an aggregator and advisory service.`} />;
      default: return <HomePage navigate={setActivePage} />;
    }
  };

  return (
    <div className="min-h-screen bg-[#020617] text-slate-200 font-sans selection:bg-lime-400 selection:text-black overflow-x-hidden">
      {/* Dynamic Background Grid */}
      <div 
        className="fixed inset-0 z-0 pointer-events-none opacity-20"
        style={{
          backgroundImage: `linear-gradient(to right, #1e293b 1px, transparent 1px), linear-gradient(to bottom, #1e293b 1px, transparent 1px)`,
          backgroundSize: '40px 40px',
          maskImage: 'radial-gradient(circle at center, black, transparent 80%)'
        }}
      ></div>

      <CustomCursor />

      {/* Navigation */}
      <nav className={`fixed w-full z-50 transition-all duration-300 border-b ${scrolled ? 'bg-slate-950/80 backdrop-blur-md border-slate-800 py-4' : 'bg-transparent border-transparent py-6'}`}>
        <div className="container mx-auto px-6 flex justify-between items-center">
          {/* Logo - Using the uploaded image as icon */}
          <div 
            className="text-2xl font-bold font-header tracking-tight text-white flex items-center gap-3 cursor-pointer interactive" 
            onClick={() => setActivePage('home')}
          >
            <img 
              src={logoUrl}
              alt="Logo" 
              className="w-10 h-10 rounded object-cover border border-lime-400/50"
            />
            <span>
              SEVENTH<span className="text-lime-400">CREDITS</span>
            </span>
          </div>

          {/* Desktop Nav */}
          <div className="hidden md:flex items-center gap-8">
            {navLinks.map(link => (
              <button
                key={link.id}
                onClick={() => handleNav(link.id)}
                className={`text-sm font-mono tracking-wide uppercase transition-colors interactive hover:text-lime-400 ${activePage === link.id ? 'text-lime-400' : 'text-slate-400'}`}
              >
                {link.label}
              </button>
            ))}
            <Button onClick={() => setActivePage('contact')} variant="primary" className="py-2 px-4 text-xs">
              Contact Us
            </Button>
          </div>

          {/* Mobile Toggle */}
          <button className="md:hidden text-white interactive" onClick={() => setMenuOpen(!menuOpen)}>
            {menuOpen ? <X /> : <Menu />}
          </button>
        </div>
      </nav>

      {/* Mobile Menu Overlay */}
      {menuOpen && (
        <div className="fixed inset-0 z-40 bg-slate-950 flex flex-col justify-center items-center gap-8 md:hidden">
          {navLinks.map(link => (
            <button
              key={link.id}
              onClick={() => handleNav(link.id)}
              className="text-3xl font-bold text-white hover:text-lime-400 transition-colors font-header"
            >
              {link.label}
            </button>
          ))}
        </div>
      )}

      {/* Main Content Area */}
      <main className="relative z-10 min-h-screen flex flex-col">
        {renderContent()}
      </main>

      {/* Footer */}
      <footer className="bg-slate-950 border-t border-slate-800 pt-20 pb-10 relative z-10">
        <div className="container mx-auto px-6">
          <div className="grid grid-cols-1 md:grid-cols-4 gap-12 mb-16">
            <div className="col-span-1 md:col-span-2">
              <div className="flex items-center gap-2 text-2xl font-bold text-white mb-6 font-header">
                <img src={logoUrl} className="w-8 h-8 rounded" alt="Logo" />
                SEVENTH CREDITS
              </div>
              <p className="text-slate-400 max-w-sm mb-8 font-sans">
                Partnered with 50+ Banks and NBFCs. India's trusted financial aggregator.
              </p>
              <div className="flex gap-4">
                {[Twitter, Linkedin, Mail].map((Icon, i) => (
                  <a key={i} href="#" className="w-10 h-10 border border-slate-700 rounded flex items-center justify-center text-slate-400 hover:text-lime-400 hover:border-lime-400 transition-all interactive">
                    <Icon className="w-5 h-5" />
                  </a>
                ))}
              </div>
            </div>
            
            <div>
              <h4 className="text-white font-bold mb-6 font-mono">Company</h4>
              <ul className="space-y-4">
                {['Home', 'Services', 'About', 'Blog'].map(item => (
                  <li key={item}>
                    <button onClick={() => handleNav(item.toLowerCase())} className="text-slate-400 hover:text-lime-400 transition-colors text-sm font-mono">
                      {item}
                    </button>
                  </li>
                ))}
              </ul>
            </div>

            <div>
              <h4 className="text-white font-bold mb-6 font-mono">Legal</h4>
              <ul className="space-y-4">
                {['Privacy', 'Terms', 'Sitemap'].map(item => (
                  <li key={item}>
                    <button onClick={() => setActivePage(item.toLowerCase())} className="text-slate-400 hover:text-lime-400 transition-colors text-sm font-mono">
                      {item === 'Privacy' ? 'Privacy Policy' : item === 'Terms' ? 'Terms & Conditions' : item}
                    </button>
                  </li>
                ))}
              </ul>
            </div>
          </div>
          
          <div className="border-t border-slate-900 pt-8 flex flex-col md:flex-row justify-between items-center text-xs text-slate-600 font-mono">
            <p>&copy; 2025 Seventh Credits. All rights reserved.</p>
            <div className="flex items-center gap-2 mt-4 md:mt-0">
              <span className="w-2 h-2 bg-green-500 rounded-full animate-pulse"></span>
              Advisory: Active
            </div>
          </div>
        </div>
      </footer>
      
      <style>{`
        /* Updated Fonts to match the 'Rive' video aesthetic (Technical/Monospace headers) */
        @import url('https://fonts.googleapis.com/css2?family=Space+Mono:ital,wght@0,400;0,700;1,400&family=Inter:wght@300;400;500;600&family=JetBrains+Mono:wght@400;500&display=swap');
        
        body {
          font-family: 'Inter', sans-serif; /* Clean body text like the video */
          cursor: none; 
        }
        
        /* The video uses a heavy Monospace font for headers */
        .font-header {
          font-family: 'Space Mono', monospace; 
          letter-spacing: -0.04em;
        }

        .font-mono {
          font-family: 'JetBrains Mono', monospace;
        }

        .font-sans {
          font-family: 'Inter', sans-serif;
        }

        /* 3D Animations */
        @keyframes floating-card {
           0% { transform: translateY(0px) rotate(0deg); }
           50% { transform: translateY(-20px) rotate(2deg); }
           100% { transform: translateY(0px) rotate(0deg); }
        }

        @keyframes floating-card-delayed {
           0% { transform: translateY(0px) rotate(0deg); }
           50% { transform: translateY(-15px) rotate(-2deg); }
           100% { transform: translateY(0px) rotate(0deg); }
        }

        @keyframes floating-element {
           0% { transform: translateY(0px); }
           50% { transform: translateY(-10px); }
           100% { transform: translateY(0px); }
        }

        @keyframes float-slow {
           0% { transform: translateY(0px); }
           50% { transform: translateY(-15px); }
           100% { transform: translateY(0px); }
        }
        
        .animate-float-slow {
           animation: float-slow 5s ease-in-out infinite;
        }

        .animate-pulse-slow {
           animation: pulse 4s cubic-bezier(0.4, 0, 0.6, 1) infinite;
        }

        .floating-card {
           animation: floating-card 6s ease-in-out infinite;
        }

        .floating-card-delayed {
           animation: floating-card-delayed 7s ease-in-out infinite reverse;
        }

        .floating-element {
           animation: floating-element 4s ease-in-out infinite;
        }

        @media (max-width: 768px) {
            body { cursor: auto; }
            .fixed.pointer-events-none { display: none; }
        }

        ::-webkit-scrollbar {
          width: 8px;
        }
        ::-webkit-scrollbar-track {
          background: #020617; 
        }
        ::-webkit-scrollbar-thumb {
          background: #334155; 
          border-radius: 4px;
        }
        ::-webkit-scrollbar-thumb:hover {
          background: #a3e635; 
        }
      `}</style>
    </div>
  );
};

export default App;